<template>
    <div class="create-program">
        <section class="base-card">
            <el-steps :space="200" :active="activeStep" align-center finish-status="success">
                <el-step v-for="(item, index) in stepOptions" :key="index" :title="item.title" />
            </el-steps>
        </section>
        <section :class="[activeStep === AddStep.SELECT_POINT ? 'flex-card' : 'base-card']">
            <component
                :is="activeComponent.component"
                ref="activeComponentRef"
                :is-create="true"
                @onPointConfirm="onPointConfirm"
            />
        </section>
        <section class="btn-group">
            <el-button @click="goList"> 返回方案列表 </el-button>
            <el-button :loading="loadingButton" type="primary" @click="handleSubmit">
                {{ activeComponent.buttonText }}
            </el-button>
            <el-popover placement="top-start" :width="200" trigger="hover" :content="activeComponent.popoverMsg">
                <template #reference>
                    <el-icon v-if="activeComponent.popoverMsg">
                        <SvgIcon class="SvgIconFont" name="ask"></SvgIcon>
                    </el-icon>
                </template>
            </el-popover>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, defineAsyncComponent } from 'vue';
import InputBaseInfo from './components/inputBaseInfo.vue';
import SelectPoint from './components/selectPoint.vue';
import { AddStep } from './programType.ts';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const CorrelationIdeas = defineAsyncComponent(() => import('./components/correlationIdeas.vue'));

const router = useRouter();
const route = useRoute();
// const { maxTableHeight, setTableMaxHeight } = useTableSetting({ id: 'componentsContainer', offsetBottom: 150 });
const activeComponentRef = ref(null);
const loadingButton = ref(false);
const { step = '0' } = route.query;

const activeStep = ref<AddStep>(+step);

const stepOptions = [
    {
        title: '录入信息',
        component: InputBaseInfo,
        buttonText: '确认方案信息',
        popoverMsg:
            '确认后，除方案名称、销售类型、结束日期、备注、拍照要求外，其他信息无法修改，请谨慎操作。编辑方案信息，可以通过方案列表的“更多-编辑方案信息”功能完成',
        successMsg: '方案创建成功',
    },
    {
        title: '选择点位',
        component: SelectPoint,
        buttonText: '锁定已选点位',
        popoverMsg:
            '选点过程中，系统会实时保存选点结果，但不会占用点位库存。锁定点位后，将进入关联创意环节，再调整点位需要通过方案列表的“调整点位”功能',
        successMsg: '锁定已选点位成功',
    },
    {
        title: '关联创意',
        component: CorrelationIdeas,
        buttonText: '确认关联创意',
        successMsg: '关联创意成功',
    },
];
const activeComponent = computed(() => stepOptions[activeStep.value]);
const handleSubmit = async () => {
    loadingButton.value = true;
    try {
        console.log(activeComponentRef.value);

        const res = await activeComponentRef.value.handleSubmit(); // 提交当前组件表单
        if (activeStep.value === 2 && !res) {
            return;
        }
        ElMessage.success(activeComponent.value.successMsg);
        if (activeStep.value !== 2) {
            activeStep.value++;
        } else {
            router.replace('/delivery/program');
        }
    } finally {
        loadingButton.value = false;
    }
};

const onPointConfirm = () => {
    if (activeStep.value !== 2) {
        activeStep.value++;
    } else {
        router.replace('/delivery/program');
    }
};

const store = useStore();
const goList = () => {
    store.commit('plan/setDeleted', false);
    router.replace('/delivery/program');
};
// watch(activeStep, (val) => {
//     nextTick();
//     const offsetBottom = val === AddStep.SELECT_POINT ? -20 : 170;
//     maxTableHeight.value = setTableMaxHeight('componentsContainer', offsetBottom);
// });
</script>

<style lang="scss" scoped>
.create-program {
    padding-bottom: 36px;
}

.container {
    position: relative;
}

.base-card {
    padding: 0;

    .el-steps {
        justify-content: center;

        :deep(.el-step) {
            flex-basis: 355px !important;

            .el-step__icon {
                width: 24px;
                height: 24px;
            }

            .el-step__title {
                font-size: 14px;
            }
        }
    }

    & + & {
        margin-top: 20px;
    }
}

.btn-group {
    height: 56px;
    background: #fff;
    padding-right: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 22px;
    left: 22px;
    bottom: 0;
    z-index: 9;

    .el-icon {
        margin-left: 5px;
        color: var(--el-button-text-color, var(--el-text-color-regular));
    }
}

.flex-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
</style>
